<template>
    <div class="city_body">
       <div class="city_list">
           <loading v-if="isLoading" />
            <scroller v-else ref="city_list">
                <div>
                    <div class="city_hot">
                        <h2>热门城市</h2>
                        <ul class="clearfix">
                            <li 
                                v-for="item in hotCityList" 
                                :key="item.id" 
                                @tap="handleToCity(item.nm, item.id)">
                                {{ item.nm }} 
                            </li>
                        </ul>
                    </div>
                    <div class="city_sort" ref="city_sort">
                        <div v-for="item in cityList" :key="item.index"> 
                            <h2>{{ item.index }}</h2>
                            <ul>
                                <li 
                                    v-for="itemList in item.list" 
                                    :key="itemList.id"
                                    @tap="handleToCity(itemList.nm, itemList.id)">
                                    {{ itemList.nm }}
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </scroller>
        </div>
       <div class="city_letter">
           <ul>
               <li 
                    v-for="(item, index) in cityList" 
                    :key="item.index" 
                    @touchstart="handleToIndex(index)">
                    {{ item.index }}
               </li>
           </ul>
       </div>
    </div>
</template>

<script>
export default {
    name: 'City',
    data () {
        return {
            cityList: [],
            hotCityList: [],
            isLoading: true
        }
    },
    mounted () {
        // 获取localStore的数据，
        const cityList = window.localStorage.getItem(cityList)
        const hotCityList = window.localStorage.getItem(hotCityList)

        if (cityList && hotCityList) {
            // 为 true时 ，直接读取localStore的数据
            this.cityList = JSON.parse(cityList)
            this.hotCityList = JSON.parse(hotCityList)
            this.isLoading = false       
        }
        else {
            this.$axios.get('/api/cityList')
            .then(res => {
                // console.log(res);
                const msg = res.data.msg
                if (msg === 'ok') {
                    const citiesData = res.data.data.cities
                    // 将返回数据的格式改成[{index: 'A',list: [{name: '大连'},{id: 12}]}] 
                    const { cityList, hotCityList } = this.formatCityList(citiesData)
                    this.cityList = cityList 
                    this.hotCityList = hotCityList
                    this.isLoading = false

                    // 将响应数据储存在localStore中，字符串格式，可在application上查看
                    window.localStorage.setItem('cityList', JSON.stringify(cityList))
                    window.localStorage.setItem('hotCityList', JSON.stringify(hotCityList))
                }
            })
            .catch(err => {
                console.log('请求错误' + err)
                })
            }
    },
    methods: {
        formatCityList (cities) {
            const cityList = []
            const hotCityList = []
            for(var i = 0; i < cities.length; i++) {
                if (cities[i].isHot === 1) {
                    hotCityList.push( cities[i] )
                }
            }
            for(var i = 0; i < cities.length; i++) {
                // 1.找到响应数据每个城市名的首字母
                var firstLetter = cities[i].py.substring(0,1).toUpperCase() 
                // 3.如果不存在，就在cityList数组中添加数据
                if (toCom(firstLetter)) {
                    cityList.push(
                        { index: firstLetter, list: [{ nm: cities[i].nm, id: cities[i].id }]
                        })                   
                }
                else { // 将城市加到已有的index中
                    for (var j = 0; j < cityList.length; j++) {
                        if (cityList[j].index === firstLetter) {
                            cityList[j].list.push({ nm: cities[i].nm, id: cities[i].id })
                        }
                    }
                }
            }
            // 排序
            cityList.sort((n1,n2) => {
                if(n1.index > n2.index) {
                    return 1
                }
                else if (n1.index < n2.index) {
                    return -1
                }
                else {
                    return 0
                }
            })

        // 2.判断首字母在cityList数组的每一项的index是否存在，存在就返回false
        function toCom (firstLetter) {
            for(var i = 0; i < cityList.length; i++) {
                if (cityList[i].index === firstLetter) {
                    return false
                  }
                }
                return true
            }
            return {
                cityList,
                hotCityList
            };
        },
        handleToIndex (index) {
            const h2 = this.$refs.city_sort.getElementsByTagName('h2')
            // this.$refs.city_sort.parentNode.scrollTop = h2[index].offsetTop;
            this.$refs.city_list.toScrollTop(-h2[index].offsetTop)
        },
        handleToCity (nm, id) {
            this.$store.commit('city/CITY_INFO', { nm, id })
            window.localStorage.setItem('cityNm', nm)
            window.localStorage.setItem('cityId', id)
            this.$router.push('/movie/hotShowing')
        }
    }
}
</script>

<style lang="scss" scoped> 
#content .city_body {
    position: absolute; 
    top: 0; 
    bottom: 0; 
    width: 100%; 
    margin-top: 45px; 
    display: flex; 
    .city_list { 
        flex: 1; 
        overflow: auto; 
        background: #FFF5F0;
        .city_hot {
            margin-top: 20px;
            h2{ 
                padding-left: 15px; 
                line-height: 30px; 
                font-size: 14px; 
                background:#F0F0F0; 
                font-weight: normal;
            }
             ul li { 
                width: 29%; 
                height: 33px;
                line-height: 33px;
                float: left; 
                background: $color; 
                margin-top: 15px; 
                margin-left: 3%; 
                padding: 0 4px; 
                border: 1px solid $bdColor; 
                border-radius: 3px; 
                text-align: center; 
                box-sizing: border-box;
            }
        }
        .city_sort {
            div {
                margin-top: 20px;
            }
            h2{ 
                padding-left: 15px; 
                line-height: 30px; 
                font-size: 14px; 
                background:#F0F0F0; 
                font-weight: normal;
            }
            ul { 
                padding-left: 10px; 
                margin-top: 10px;
                li {
                line-height: 30px;
                }
            }
        }
    } 
    .city_letter { 
        width: 20px; 
        display: flex;
        flex-direction: column; 
        justify-content: center; 
        text-align: center; 
        border-left: 1px $bdColor solid;
    } 
}

</style>
